<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<style type="text/css">
			.big_img {
				height: 632px;
				background-color: #222222;
				display: flex;
				justify-content: center;
			}

			.middle,
			.right {
				margin-top: 50px;
			}

			

			.right {
				padding-top: 80px;
			}

			.hand {
				display: flex;
				justify-content: flex-end;
			}

			.game {
				margin: 0 10px 0;
			}

			.left_icon,
			.right_icon {
				display: flex;
			}

			.left_icon {
				margin-top: 20px;
			}

			.right_title {
				margin-bottom: 100px;
			}

			.right_title h2 {
				font-size: 31px;
				color: #11ac9f;
			}

			.right_title h1 {
				font-size: 39px;
				color: #11ac9f;
				margin-bottom: 10px;
			}

			.right_title p {
				font-size: 20px;
				color: #929292;
			}

			button {
				margin-top: 20px;
				background-color: #11ac9f;
				width: 133px;
				height: 51px;
				border: 0px;
				border-radius: 25px;
				color: white;
				font-size: 18px;
				font-weight: bold;
			}
			
			.middle {
				margin-left: 10px;
				margin-right: 10px;
			}
			.game_hid {
				margin: 0 24px 0;
				width: 215px;
				height: 495px;
				position: absolute;
				top: 0;
				left: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				overflow: hidden;
				/* visibility: hidden; */
			}

			.game_hid img {
				text-align: center;
				/* transform: translate(263px); */
				transition: all 1s;
			}

			.midd_phone {
				position: relative;
			}

			.middle {
				position: relative;
			}
		</style>
	</head>
	<body>
		<div class="big_img">
			<div class="left">
				<div class="hand">
					<img src="img/hand_03.jpg">
				</div>
				<div class="left_icon">
					<div class="game"><img src="img/g1_03.png" alt=""></div>
					<div class="game"><img src="img/g2_03.png" alt=""></div>
					<div class="game"><img src="img/g3_03.png" alt=""></div>
					<div class="game"><img src="img/g4_03.png" alt=""></div>
				</div>
			</div>
			<div class="middle">
				<div class="midd_phone">
					<img src="img/phone_03.png">
				</div>
				<div class="game_hid">
					<img src="" class="game_img_hid">
					<!-- <img src="img/white_03.jpg" > -->
				</div>

				<!-- <img src="img/white_03.jpg" > -->
			</div>
			<div class="right">
				<div class="right_title">
					<h2>我们能给</h2>
					<h1>客户带来的利益</h1>
					<p>每一个细节的处理</p>
					<p>都体现出我们对时尚的不懈追求</p>
					<button type="button">了解更多</button>
				</div>
				<div class="right_icon">
					<div class="game"><img src="img/g5_03.png" alt=""></div>
					<div class="game"><img src="img/g6_03.png" alt=""></div>
					<div class="game"><img src="img/g7_03.png" alt=""></div>
					<div class="game"><img src="img/g8_03.png" alt=""></div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			var phone_img = document.querySelector(".game_hid");
			var hid_img = document.querySelector(".game_img_hid");
			var game = document.querySelectorAll(".game")
			var arr = [
				"img/phoneimg_03.jpg",
				"img/white_03.jpg"
			]
			game.forEach((val,index) => {
				val.onclick = function() {
					// if(hid_img.style.transform == "translate(0px)"){
					// 	hid_img.style.transform = "translate(263px)"
					// }else{
					// 	hid_img.style.transform = "translate(0)"
						
					// }
					hid_img.src = arr[index]
					// hid_img.style.transform = "translate(0)"
					console.log(index);
					
					// hid_img.style.transform = "translate(0)"
					// console.log(document.querySelectorAll(".game")[3]);
					// if (phone_img.style.visibility == "visible") {
					// 	hid_img.src = "img/white_03.jpg";
					// 	phone_img.style.visibility = "hidden";
					// } else {
					// 	phone_img.style.visibility = "visible";
					// }
				}
			});
			
		</script>
	</body>
</html>
